<script>
	import HeaderNav from '@/components/HeaderNav.vue'
	import TaskContainer from '@/components/TaskContainer.vue'
	import EnterpriseTaskItem from '@/components/EnterpriseTaskItem.vue' 
	import Condition from '@/components/Condition.vue'
	export default {
		components: {
			HeaderNav,
			EnterpriseTaskItem, 
			TaskContainer,
			Condition ,
		},
		data() {
			return {
				pagination: {
					page: 1, 
					rows: 20, 
				},
				condition: {} , // 查询条件
				conditionList: [
					{
						name: "任务阶段" ,
						value: 'stage',  // 查询条件对应的键
						list: [
							{id: 1, name: "第一阶段"},
							{id: 2, name: "第二阶段"},
							{id: 3, name: "第三阶段"},
							{id: 4, name: "第四阶段"},
							{id: 5, name: "第五阶段"}
						],
					},
					{
						name: "难易程度" ,
						value: 'leave',  // 查询条件对应的键
						list: [
							{id: "简单题", name: "简单题"},
							{id: "中等题", name: "中等题"},
							{id: "难题", name: "难题"},
							{id: "选做题", name: "选做题"},
						],
						multi: true, // 支持多选
					}
				]
			}
		},
		methods: {
			addTask(event) {
				this.$layer.open({
					type: 2,
					title: '添加任务',
					shadeClose: true,
					shade: 0.5,
					area: ['860px', '560px'],
					btn: ['保存', '关闭'] ,
					content: '/task/add',
					yes: (index, layero) => {
						layer.close(index);
					}
				})
			},
			removeTask(taskId) {
				this.$layer.confirm('确定要删除该任务吗？', {icon: 3, title:'提示'}, (index)=> {
					this.$layer.msg('删除成功');
					this.$layer.close(index);
				})
			}
		}
	}
</script>

<template>
  <main>
	  <!-- 系统导航 -->
	 <HeaderNav active-index="0"></HeaderNav>
	 
	 <!-- 搜索条件 -->
	 <Condition :conditionList="conditionList" v-model="condition">
		 <template #search="{ condition }">
			 <el-input
			   v-model="condition.search" size="large"
			   placeholder="请输入搜索的任务关键词">
			   <template #prefix>
				 <el-icon class="el-input__icon"><search /></el-icon>
			   </template>
			 </el-input>
		 </template>
		 
		 <template #toolbar>
			  <el-button type="primary" size="large" @click="addTask">添加任务
				<template #icon>
					<el-icon><CirclePlus /></el-icon>
				</template>
			  </el-button>
		 </template>
	 </Condition>
	 
	 <!-- 任务列表 -->
	 <TaskContainer>
		 <!-- 显示单个任务列表 -->
		 <EnterpriseTaskItem v-for="n in 20" 
				:id="1" 
				:leave="1" 
				:stage="1" 
				title="装饰器】编写一个装饰器 logs、记录函数的执行信息、包括 函数名、参数、返回值结果" 
				module-name="java基础" 
				@delete-click="removeTask"/>
		 
		<!-- 添加分页插件 -->
		<div style="margin: 20px 0;">
		  <el-pagination background layout="prev, pager, next"
				hide-on-single-page
			   :page-size="pagination.rows"
		       :pager-count="11"
			   v-model:current-page="pagination.page"
			   :total="1000" />
		</div>
	 </TaskContainer>
	 
  </main>
</template>

